<template>
  <div class="g-table-api">
    <table border="0" cellspacing="0">
      <thead>
        <tr>
          <th v-for="(c, index) in columns" :key="index">{{ c }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i) in source" :key="i">
          <td v-for="(j, jIndex) in item" :key="jIndex">{{ j  || '—'}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'g-table-simple',
  props: {
    type: {
      type: String,
      default: 'default',
    },
    columns: {
      type: Array,
      default: function () {
        if (this.type == 'event') {
          return ['事件名称', '说明', '参数']
        } else if (this.type  == 'default') {
          return ['日期', '姓名', '地址']
        } else if(this.type == 'methods') {
          return ['方法名', '说明', '参数']
        } else {
          return ['参数', '说明', '类型', '可选值', '默认值']
        }
      },
    },
    source: {
      type: Array,
    },
  },
}
</script>

<style lang="scss" scoped>
.g-table-api {
  width: 100%;
  border-collapse: collapse;
  table {
    width: 100%;
    font-size: 14px;
    thead {
      th {
        text-align: left;
        color: var(--config-color-text9);
        padding: 15px;
        max-width: 250px;
        font-weight: 400;
        white-space: nowrap;
        border-bottom: 1px solid var(--config-color-border);
      }
    }
    tbody {
      td {
        color: var(--config-color-text);
        padding: 15px;
        max-width: 250px;
        border-bottom: 1px solid var(--config-color-border);
      }
    }
  }
}
</style>
